iT邦幫忙

2022 iThome 鐵人賽

DAY 29
0
自我挑戰組

React 面 項目 看起來很好吃吧--佐material 調料系列 第 29

React side project--Skeleton (元件 Loding)

  • 分享至 

  • xImage
  •  

在畫面載入時,可以在元件區塊上,加上等待的loading

根據各元件的大小設定size
https://ithelp.ithome.com.tw/upload/images/20221013/20098345Fu0AhNaiav.png

在用狀態flag給予切換
https://ithelp.ithome.com.tw/upload/images/20221013/20098345B5mZR2v6KW.png

利用 item flag 狀態 有就顯示圖片 沒有就用個210 * 118的Skeleton 去暫時替代圖片的空間

{
  item ? (
    <img
      style={{
        width: 210,
        height: 118,
      }}
      alt={item.title}
      src={item.src}
    />
  ) : (
    <Skeleton variant="rectangular" width={210} height={118} />
  );
}

上一篇
React side project--Modal(子母彈窗)
下一篇
React side project--Final Sample(組合餐點)
系列文
React 面 項目 看起來很好吃吧--佐material 調料30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言